<template>
    <div>
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus">新增</el-button>
        <el-input placeholder="请输入机器名" v-model="keywords" class="inputSuffix">
            <el-button slot="append" type="primary" icon="el-icon-search" class="searchBtn" @click="searchBtn"></el-button>
        </el-input>
        <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading" >
            <el-table-column fixed type="index" label="*" sortable  min-width="40"></el-table-column>
            <el-table-column prop="name" label="名称"  sortable min-width="100"></el-table-column>
            <el-table-column prop="code" label="编码" ref="code"  sortable show-overflow-tooltip min-width="160"></el-table-column>
            <el-table-column prop="type" label="型号" sortable min-width="85"></el-table-column>
            <el-table-column prop="startTime" label="启用时间" sortable  min-width="120"></el-table-column>
            <el-table-column prop="endTime" label="停用时间" sortable  min-width="90"></el-table-column>
            <el-table-column prop="state" label="状态"   min-width="90">
                <template slot-scope="scope">
                    <span v-if="scope.row.state===0">停用</span>
                    <span v-if="scope.row.state===1">在用</span>
                </template>
            </el-table-column>
            <el-table-column prop="creatorName" label="创建人"  sortable min-width="90"></el-table-column>
             <el-table-column prop="createTime" label="创建时间" sortable  min-width="90"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
                    <el-button @click="printQrCode(scope.row,scope.$index)" type="text" size="mini">打印二维码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 基础信息编辑 -->

        <el-dialog :title="dialog.title" width="800px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
             <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="150px" :model="dialog.formDate">
                <el-form-item label="机器名称">
                    <el-input v-model="dialog.formDate.name"></el-input>
                </el-form-item>
                <el-form-item label="机器编码">
                    <el-input v-model="dialog.formDate.code" disabled></el-input>
                </el-form-item>
                <el-form-item label="机器型号">
                    <el-input v-model="dialog.formDate.type"></el-input>
                </el-form-item>
                <el-form-item label="启用时间">
                   <el-date-picker  v-model="dialog.formDate.startTime" type="date" placeholder="启用时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="停用时间">
                   <el-date-picker  v-model="dialog.formDate.endTime" type="date" placeholder="停用时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="dialog.formDate.state" class="inputSuffix">
                        <el-option label="停用" value=0></el-option>
                        <el-option label="在用" value=1></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建人" v-if="dialog.title.indexOf('编辑')>-1">
                    <el-input v-model="dialog.formDate.creatorName" disabled></el-input>
                </el-form-item>
                <el-form-item label="创建时间" v-if="dialog.title.indexOf('编辑')>-1">
                    <el-input v-model="dialog.formDate.createTime" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>
              <div id="qrcodep">
              <div id="qrcode" style="position:absolute;right:50px;top:20px;" >
              </div>
                <div id="name" style="text-align: center;"></div>
              </div>

    </div>

</template>
<script>
import QRCode from 'qrcodejs2'
import hcHttp from '@/axios/hcHttp.js'

export default {
    data(){
        return {
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            loading:false,/**加载参数 */
            tabaleData:[],/**表格数据列表 */
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            keywords:'',
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{
                title:'',
                isShow:false,
                type:'',
                formDate:{
                }
            },
        }
    },
    created(){
        let  self = this;
        self.getTableList()
    },
    methods:{
        getTableList(){
            let self = this,
            data={
               currentPage:self.pagination.currentPage,
               pageSize:self.pagination.pageSize,
               name:self.keywords,
            };
            hcHttp.getHcMachine(data).then(res=>{
                self.tabaleData=res.content.records
                self.pagination.total = res.content.total;
            })
        },
        searchBtn(){
            this.pagination.currentPage=1;
            this.getTableList();
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getTableList();
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getTableList();
        },
        isShowDialog(type,row){
            let self = this;
            self.dialog.title = type==='insert'?'新增':'编辑';
            self.dialog.type = type;
            self.dialog.isShow = true;
            self.dialog.formDate= type==='insert'?{}:{...row};
        },
        submitList(){
            let self = this;
            hcHttp.insertUpdateHcmachine(self.dialog.type,self.dialog.formDate).then(res=>{
                self.$message.success(`${self.dialog.title}成功`);
                self.dialog.isShow = false;
                self.getTableList();
            })
        },
        printQrCode(row){
            let self=this;
           self.$nextTick(function () {
                    let qrcode = new QRCode("qrcode", {
                        width: 150,
                        height: 150,
                        text: row.code,
                        colorDark: "#000000",
                        colorLight: "#ffffff"
                    });
                });
          setTimeout(()=>{
          document.getElementById("name").innerHTML=row.name;
          self.$print(document.getElementById("qrcodep"));
           document.getElementById("qrcode").innerHTML = "";
           document.getElementById("name").innerHTML="";
           },200)
        },
    }
}
</script>
<style scoped>
.icon-circle{
    line-height: 100%;
    font-size:18px;
}
</style>
